<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>李昊哲-小课</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #out_box {
            width: 450px;
            height: 450px;
            background-color: #929854;
            text-align: center;
            position: absolute;
            top: 100px;
            left: 100px;
        }

        #inner_box {
            width: 300px;
            height: 300px;
            background-color: #4365c3;
            line-height: 75px;
            position: absolute;
            left: 75px;
            top: 75px;
        }
    </style>
</head>
<body>
    <div id="out_box">
        <div id="inner_box">
            <a href="https://space.bilibili.com/480308139" id="lhz">李昊哲</a>
        </div>
    </div>
    <script>
        // 获取页面DOM元素
        let out_box = window.document.querySelector('#out_box');
        let inner_box = window.document.querySelector('#inner_box');
        let lhz = window.document.querySelector('#lhz');
        // 给DOM元素添加事件监听
        out_box.addEventListener('click',function (e) {
            window.alert('out_box');
        });
        // 给DOM元素添加事件监听
        inner_box.addEventListener('click',function (e) {
            // ie下阻止冒泡
            e.cancelBubble = true
            // 其它浏览器下阻止冒泡
            // 这是阻止事件的冒泡方法，阻止事件向document上蔓延，但是默认事件仍然会执行，当你调用这个方法的时候，如果点击一个连接，这个连接仍然会被打开
            e.stopPropagation();
            
            window.alert('inner_box');
        });

        lhz.addEventListener('click',function (e) {
            // 这是阻止默认事件的方法，调用此方法时，链接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素
            e.preventDefault();
        });
        
    </script>
</body>
</html>
